$dateBase-prefix = $datePicker-prefix + '-base'

.{$datePicker-prefix}
  display inline-block
  .{$datePicker-prefix}-content
    position relative
    &:hover
      input
        border 1px solid $primary-color
        box-shadow 0 0 0 2px rgba($primary-color, .2)
    .{$icon-prefix}-close
      position absolute
      top 3px
      right 8px
      cursor pointer
      font-size 16px
      &:hover
        color $primary-color

.{$dateBase-prefix}
  width 260px
  background-color $white-color
  padding 9px 11px
  box-shadow 0 5px 10px rgba($gray4-color, .5)
  &.{$dateBase-prefix}-hour, &.{$dateBase-prefix}-minute
    width 222px
  &.{$dateBase-prefix}-year, &.{$dateBase-prefix}-month, &.{$dateBase-prefix}-hour, &.{$dateBase-prefix}-minute
    .{$dateBase-prefix}-content
      .{$dateBase-prefix}-number-list
        span
          &.d-date-seleted
            color $primary-color
            background-color $white-color
  &.{$dateBase-prefix}-hour, &.{$dateBase-prefix}-minute
    .{$dateBase-prefix}-content
      .{$dateBase-prefix}-number-list
        span
          width 50px
          border-radius 5px
  &.{$dateBase-prefix}-year, &.{$dateBase-prefix}-month
    width 248px
    .{$dateBase-prefix}-content
      .{$dateBase-prefix}-number-list
        span
          width 50px
          height 50px
          line-height 50px
          margin 3px
  .{$dateBase-prefix}-header
    display flex
    justify-content space-between
    .date-header-item
      flex 2
      cursor pointer
      &:first-child
        text-align left
      &:last-child
        text-align right
      &.date-title-select
        flex 3
        text-align center
      span
        &:hover
          color $primary-color
          i[class^="d-icon"]
            color $primary-color
      .d-icon-left, .d-icon-right
          color $dark4-color
      .date-prev
        .d-icon-left
          &:nth-child(2)
            position relative
            left -5px
      .date-next
        .d-icon-right
          &:nth-child(1)
            position relative
            right -5px
      .year-title
        margin-right 8px

  .{$dateBase-prefix}-content
    .{$dateBase-prefix}-week-list, .{$dateBase-prefix}-number-list
      word-break break-all
      span
        display inline-block
        width 34px
        height 34px
        line-height 34px
        text-align center
        cursor default
        border-radius 50%
    .{$dateBase-prefix}-week-list
      font-weight bold
    .{$dateBase-prefix}-number-list
      span
        font-size $font-size-mini
        color $dark2-color
        &:hover
          background-color $gray4-color
        &.d-date-seleted
          background-color $primary-color
          color $white-color
        &.d-date-disabled
          color $gray3-color
          pointer-events none
